<template>
	<view class="grid">
		<view class="submit" @click="ok" :style="{ background: payNowActived ? color : unColor }">
			<view class="inner">
				<view>确认</view>
			</view>
		</view>
		<view :class="tapKeyword == '1' ? 'item tapped' : 'item'" @click="tap('1')">1</view>
		<view :class="tapKeyword == '2' ? 'item tapped' : 'item'" @click="tap('2')">2</view>
		<view class="item" :class="tapKeyword == '3' ? 'item tapped' : 'item'" @click="tap('3')">3</view>
		<view class="item back-item" :class="tapKeyword == 'back' ? 'item tapped' : 'item'" @click="tap('back')">
			<image src="../../static/back.svg" class="back-icon" mode="widthFix" />
		</view>
		<view class="item" :class="tapKeyword == '4' ? 'item tapped' : 'item'" @click="tap('4')">4</view>
		<view class="item" :class="tapKeyword == '5' ? 'item tapped' : 'item'" @click="tap('5')">5</view>
		<view class="item" :class="tapKeyword == '6' ? 'item tapped' : 'item'" @click="tap('6')">6</view>
		<view class="item" :class="tapKeyword == '7' ? 'item tapped' : 'item'" @click="tap('7')">7</view>
		<view class="item" :class="tapKeyword == '8' ? 'item tapped' : 'item'" @click="tap('8')">8</view>
		<view class="item" :class="tapKeyword == '9' ? 'item tapped' : 'item'" @click="tap('9')">9</view>
		<view class="zero item" :class="tapKeyword == '0' ? 'item tapped' : 'item'" @click="tap('0')">0</view>
		<view class="item" :class="tapKeyword == '.' ? 'item tapped' : 'item'" @click="tap('.')">.</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
let color = ref('#55BA36');
let unColor = ref('#C0EAB8');

// #ifdef MP-ALIPAY
color.value = '#3874F6';
//#endif

// #ifdef MP-ALIPAY
unColor.value = '#BDD5FB';
//#endif
const payNowActived = ref(false);

const tapKeyword = ref('');

const money = ref(''); // 单笔最大2000  小数点最小后2位

const ok = ()=>{
	
}

// 点击键盘震动及背景灰色功能
const tap = (keyword: string) => {
	// 振动手机，持续200毫秒
	uni.vibrateShort();
	tapKeyword.value = keyword;
	setTimeout(() => {
		tapKeyword.value = '';
	}, 200);
	switch (keyword) {
		case 'back':
			money.value = money.value.slice(0, -1);
			// 回退
			break;
		case '.':
			// 小数点
			// 判断是否已经含有小数点 如果有则不添加
			if (money.value.indexOf('.') > -1) {
				break;
			} else if (!money.value) {
				money.value += '0' + keyword;
			} else {
				money.value += keyword;
			}

			break;
		default:
			// 如果第一位是0 则下一位不能是0
			if (money.value == '0') {
				break;
			}
			// 判断小数点后是否已有两位 若有则不添加
			let regex = /^\d+\.\d{2}$/;
			if (regex.test(money.value)) {
				break;
			}
			// 判断是否到达单笔限额
			if (parseFloat(money.value + keyword) > maxSize) {
				break;
			}
			money.value += keyword;
			break;
	}
};
</script>

<style lang="scss" scoped>
.container {
	background: #f7f8fa;
	position: relative;
	color: black;
	height: 100vh;
	max-height: 100vh;
	overflow-y: hidden;
}
.content {
	padding: 20px 15px;
}
.mer {
	display: flex;
	.name {
		font-weight: 600;
		line-height: 50px;
		font-size: 20px;
	}
	.icon {
		width: 30px;
		margin: 0 auto;
	}
}
.back-icon {
	width: 40px;
	margin: 0 auto;
}
.icon-out {
	width: 50px;
	height: 50px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 50%;
	margin-right: 10px;
}
.input {
	margin-top: 50px;
	padding: 15px;
	background: white;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	.label {
		color: #8e8e8e;
		line-height: 50px;
	}
	.mone-icon {
		font-size: 25px;
		height: 50px;
		line-height: 65px;
	}
	.count {
		display: flex;
		.money-label {
			height: 50px;
			width: 10px;
			font-size: 25px;
		}
		.sep {
			width: 2px;
			height: 43px;
		}
	}
}
page {
	color: #fff;
	font-size: 16px;
}

.grid {
	display: grid;
	grid-gap: 1px;
	line-height: 80px;
	grid-template-columns: repeat(4, 1fr);
	color: black;
	font-size: 23px;
}

.submit {
	grid-row: 2 / span 3;
	grid-column: 4;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	.inner {
		margin: 0 auto;
		line-height: 40px;
	}
}
.zero {
	grid-column-start: 1;
	grid-column-end: 3;
}
.item {
	text-align: center;
	background-color: white;
}
.back-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tapped {
	background: #aeaeae;
}
.money {
	font-size: 40px;
	font-weight: 500;
}
.top {
	position: absolute;
	z-index: 99999999;
	left: 0;
	top: 0;
	width: 100%;
	height: 300px;
	background: red;
}
.bottom {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 50px;
	.about {
		margin: 30px 10px;
		text-align: right;
	}
}
.phone {
	font-size: 12px;
	color: #000000;
	text-align: right;
	margin: 10px;
}
</style>
